
<template>
	<view class="content">
		<view class="cc">
			<navigator :url="'/pages/myPrediction/myPrediction?uid='+info.userInfo.uid+'&matchType=1'" style="display: flex;flex: 1;align-items: center;" >
				<image class="image" :src="info.userInfo.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
				<view class="cc-center">
					<view class="c-tt">{{info.userInfo.nickname}}</view>
					<view class="c-tt"><text v-for="(lq,index) in info.userInfo.rankTags" :key="index" style="margin-right: 5px;font-size: 12px;">{{lq}}</text></view>
				</view>
			</navigator>
			<view class="cc-right">
				<view class="btn" :class="{myFollow:myFollow.includes(parseInt(info.recommend.uid))}" @click="attention">
				{{myFollow.includes(parseInt(info.recommend.uid))==true?$t('yuce.yiguanzhu'):$t('yuce.guanzhu')}}</view>
				<!-- <view v-if="info.userInfo.attentionNum!=0" class="text" style="font-size: 14px;margin-top: 5px;"><text style="color: red;margin-right: 5px;">{{info.userInfo.attentionNum}}</text>{{$t('yuce.yiguanzhu')}}</view> -->
			</view>
		</view>
		<view class="item">
			<view class="i1">
				<view >
					<text style="width: 250rpx;display: inline-block;">{{$t('yuce.jinshichang')}}：</text>
					<image :src="computresult(text)" style="width:16px;height: 16px;border-radius: 50%;" v-for="(text,index) in info.record.tenResult" :key="index"></image>
				</view>
				<view style="display: flex;align-items: center;">
					<text style="width: 250rpx;display: inline-block;">
						<text>{{$t('yuce.zhoumingzhong')}}：</text>
						<text><text class="red">{{info.record.weekWinrate}}</text>%</text>
					</text>
					<text>
						<image class="topp" :src="computresult('1')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.weekWin}}</text>
					<text>
						<image class="topp" :src="computresult('2')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.weekFlat}}</text>
					<text>
						<image class="topp" :src="computresult('-1')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.weekLose}}</text>
				</view>
				<view>
					<text style="width:250rpx;display: inline-block;">
						<text>{{$t('yuce.yuemingzhong')}}：</text>
						<text><text class="red">{{info.record.monthWinrate}}</text>%</text>
					</text>
					<text >
						<image class="topp" :src="computresult('1')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.monthWin}}</text>
					<text>
						<image class="topp" :src="computresult('2')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.monthFlat}}</text>
					<text>
						<image class="topp" :src="computresult('-1')" style="width:16px;height: 16px;border-radius: 50%;"></image>
					</text><text class="red" style="margin: 0 4px;">{{info.record.monthLose}}</text>
				</view>
			</view>
		</view>
		<view class="item" style="position: relative;">
			<view class="i1">
				<text style="margin-right:10px;">{{info.recommend.league}}</text>
				<text>{{ $u.timeFormat(info.recommend.gtime, 'yyyy/mm/dd/ hh:MM') }}</text>
			</view>
			<view class="i2">
				<view class="ii1" style="width: 200rpx;overflow: hidden;">
					<image class="image" :src="info.recommend.homeLogo"></image>
					<text style="text-align: center;">{{info.recommend.homeName}}</text>
				</view>
				<view class="ii2" style="width:200rpx;display: flex;justify-content: center;">
					<text class="red">{{info.recommend.score.split('-')[0]}}</text>
					<text style="margin: 0 5px;">VS</text>
					<text class="red">{{info.recommend.score.split('-')[1]}}</text>
				</view>
				<view class="ii1" style="width: 200rpx;overflow: hidden;">
					<image class="image" :src="info.recommend.awayLogo"></image>
					<text style="text-align: center;">{{info.recommend.awayName}}</text>
				</view>
			</view>
			<image :src="computresult(info.recommend.result)" style="width: 50px;height:50px;border-radius: 50%;position: absolute;right: 0;top: 0;"></image>
		</view>
		<view class="item" v-if="info.recommend.playType==-2">
			<view class="t1">{{info.recommend.playTypeStr}}</view>
			<view class="t2"  v-if="info.recommend.isShow==1">
				<view class="tti" v-for="(item,index) in info.recommend.oddsOther" :key="index">
					<view class="name" v-if="index==0">赔率</view>
					<view class="name" v-if="index==1" :style="{'background-color': info.recommend.choseSide==1?computresultColor(info.recommend.result):''}">{{$t('yuce.zhusheng')}}</view>
					<view class="name" v-if="index==2" :style="{'background-color': info.recommend.choseSide==0?computresultColor(info.recommend.result):''}">{{$t('yuce.pingju')}}</view>
					<view class="name" v-if="index==3" :style="{'background-color': info.recommend.choseSide==-1?computresultColor(info.recommend.result):''}">{{$t('yuce.kesheng')}}</view>
					<view>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="info.recommend.playType==1">
			<view class="t1">{{info.recommend.playTypeStr}}</view>
			<view class="t2" v-if="info.recommend.isShow==1">
				<view class="tt2" :style="{'background-color':info.recommend.choseSide==1?computresultColor(info.recommend.result):''}">
					<view>{{$t('yuce.zhusheng')}}</view>
					<view>{{info.recommend.oddsOther[0]}}</view>
				</view>
				<view style="font-size: 22px;">
					<view>{{info.recommend.oddsOther[1]}}</view>
				</view>
				<view class="tt2" :style="{'background-color': info.recommend.choseSide==-1?computresultColor(info.recommend.result):''}">
					<view>{{$t('yuce.kesheng')}}</view>
					<view>{{info.recommend.oddsOther[2]}}</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="info.recommend.playType==-1">
			<view class="t1">{{info.recommend.playTypeStr}}</view>
			<view class="t2" v-if="info.recommend.isShow==1">
				<view class="tt2" :style="{'background-color':info.recommend.choseSide==1?computresultColor(info.recommend.result):''}">
					<view>{{$t('yuce.daqiu')}}</view>
					<view>{{info.recommend.oddsOther[0]}}</view>
				</view>
				<view style="font-size: 22px;">
					<view>{{info.recommend.oddsOther[1]}}</view>
				</view>
				<view class="tt2" :style="{'background-color':info.recommend.choseSide==-1?computresultColor(info.recommend.result):''}">
					<view>{{$t('yuce.xiaoqiu')}}</view>
					<view>{{info.recommend.oddsOther[2]}}</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="info.recommend.playType==2">
			<view class="t1">{{info.recommend.playTypeStr}}</view>
			<view class="t2"  v-if="info.recommend.isShow==1">
				<view class="tti tti2" v-for="(item,index) in info.recommend.oddsOther" :key="index" v-if="index!=0">
					<view class="name" v-if="index==1" :style="{'background-color': info.recommend.choseSide==1?computresultColor(info.recommend.result):''}">{{$t('yuce.zhusheng')}}</view>
					<view class="name" v-if="index==2" :style="{'background-color': info.recommend.choseSide==0?computresultColor(info.recommend.result):''}">{{$t('yuce.pingju')}}</view>
					<view class="name" v-if="index==3" :style="{'background-color': info.recommend.choseSide==-1?computresultColor(info.recommend.result):''}">{{$t('yuce.kesheng')}}</view>
					<view>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="info.recommend.isShow==0">
			<view class="t1">{{$t('yuce.yuceliyou')}}</view>
			<view class="goumai">
				<view>{{$t('yuce.gmhjsfa')}}</view>
				<u-icon name="lock" color="rgb(255, 221, 87)" size="50"></u-icon>
			</view>
		</view>
		<template v-if="info.recommend.isShow!=0">
			<view class="item">
				<view class="t1">{{$t('yuce.yuceliyou')}}</view>
				<view style="margin-top: 10px;">{{info.recommend.analysisReason}}</view>
			</view>
		</template>
		
		<view class="item" v-if="info.recommend.isShow==0">
			<!-- <view class="remark">声明：本网非购彩平台，购彩请到线下彩票店。
					信息仅代表用户个人观点，不代表本站立场，请谨慎参考。</view> -->
			<view class="rr1">
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<view style="width: 200px;text-align: left;">{{$t('yuce.benyucenr')}}</view>
					<view style="display: flex;align-items: center;justify-content: start;width: 200px;">
						<view style="background-color: #F04545;text-align: center;border-radius: 6px;padding: 2px 10px;margin-right: 10px;" v-if="info.recommend.propStr">{{info.recommend.propStr}}</view>
						<navigator url="/pages/userAgreement/userAgreement?text=赛事推荐规则&type=4">
							<u-icon name="question-circle" color="#fff" size="20" ></u-icon>
						</navigator>
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view style="display: flex;align-items: center;margin-right: 10px;">
						<image src="../../static/image/yuce/zuanshi.png" style="width: 20px;height: 20px;margin-right: 5px;"></image>
						<text style="color: rgb(255, 221, 87);">{{info.recommend.money}}</text> </view>
					<u-button v-if="info.recommend.money==0" style="height: 30px;" type="primary" :text="code.tips||$t('yuce.lijizhifu')" @click="watchAd"></u-button>
					<u-button v-else type="primary" style="height: 30px;" :text="$t('yuce.lijizhifu')" @click="checkBuy"></u-button>
				</view>
			</view>
		</view>
		<u-code :seconds="code.seconds" keep-running :startText="$t('yuce.lijizhifu')" :endText="$t('yuce.lijizhifu')" changeText="Xs" ref="uCode" @change="codeChange"></u-code>
		<!-- 下载 -->
		<!-- #ifdef H5 -->
		<u-popup :show="download.show" mode="bottom" round="14" @close="download.show=false">
			<view class="lzpopup">
				<image style="width: 50px;height: 50px;margin:10px auto;" src="@/static/image/index/h5Logo.png"></image>
				<view style="color: #fff;">OlaScore Is Better on our App</view>
				<view style="color: #b8b8b8;text-align: center;">Live score updates for all matches and free live streaming of matches</view>
				<view class="btns">
					<view class="btn1" @click="download.show=false">Not now</view>
					<view class="btn1 btn2" @click="downloadFn">Download</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif-->
	</view>
</template>
<script>
	let that
	//#ifdef APP
	let jygooglead = uni.requireNativePlugin("JY-GoogleAdMob");
	// #endif
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computresult(){
				return (result,type)=>{
					if(result=='1'||result==1){
						return '../../static/image/yuce/hong.png'
					}else if(result=='2'||result==2){
						return '../../static/image/yuce/ping.png'
					}else if(result=='-1'||result==-1){
						return '../../static/image/yuce/hei.png'
					}
				}
			},
			computresultColor(){
				return (result)=>{
					if(result==1||result=='1'){
						return '#d81e06'
					}else if(result==2||result=='2'){
						return '#1296db'
					}else if(result==-1||result=='-1'){
						return '#1afa29'
					}else{
						return '#d81e06'
					}
				}
			}
		},
		data() {
			return {
				recommendId:'',//传过来的记录ID
				info:'',//详情
				myFollow:[],//我关注的用户ID
				maxNum:'',//最大值
				code:{//倒计时
					seconds:59,
					tips:'',
					num:1,//广告展现次数
				},
				download:{
					show:false
				}
			}
		},
		onLoad(op) {
			that = this
			this.recommendId = op.id
			//获取详情
			this.detail()
			this.code.num=1
		},
		methods:{
			//下载
			downloadFn(){
				window.location.href="https://img1.zhibo06.com/download/mixfootball.apk"
				this.download.show=false
			},
			codeChange(text) {
				this.code.tips  = text;
			},
			// 观看激励广告
			watchAd(){
				// #ifdef H5
				this.download.show=true
				return
				// #endif
				// #ifdef APP
				if(!this.$refs.uCode.canGetCode) {
					console.log('倒计时没结束');
					return
				}
				if(!this.userInfo){
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
					return
				}
				uni.showLoading({
					title: 'Ads Loading...',
					mask: true
				});
				//加载激励广告
				jygooglead.jy_loadRewardedAd({
					adId: getApp().globalData.insertVideoAd,
					appId: 'ca-app-pub-7130333932129753~9197186401'
				}, res=> {
					console.log('预加载广告',res);
					if(res.code=='100'){
						this.$refs.uCode.start();
						jygooglead.jy_showRewardedAd({},res=>{})
					}
					if(res.code=='103'){//广告关闭
						console.log('广告关闭');
						this.showAdInfo()
					}
					if(res.code=='106'){//加载失败
						uni.showToast({
							title: 'Ad loading failed, try again',
							icon:'none'
						});
					}
					uni.hideLoading()
				});
				// #endif
			},
			showAdInfo(){
				this.info.recommend.isShow=1
				let params={
					recommendId:this.recommendId,
					couponId:'',
				}
				uni.$u.http.post(this.api.api_v1_recommend_checkBuy, params).then(res => {
					if(res.code==200&&res.data){
						//获取详情
						this.detail()
					}
				})
			},
			//购买
			checkBuy(){
				// #ifdef H5
				this.download.show=true
				return
				// #endif
				// #ifdef APP
				uni.$u.http.post(this.api.api_v1_user_getInfo, {}).then(mm => {
					if(mm.code==200&&mm.data){
						// 判断余额是否充足
						if(mm.data.balance>this.info.recommend.money){
							let params={
								recommendId:this.recommendId,
								couponId:'',
							}
							uni.$u.http.post(this.api.api_v1_recommend_checkBuy, params).then(res => {
								if(res.code==200&&res.data){
									//获取详情
									this.detail()
								}
							})
						}else{
							uni.navigateTo({
								url: '/pages/recharge/recharge',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
					}
				}).catch(err=>{
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				})
				// #endif
				
			},
			//获取详情
			detail(){
				let params={
					recommendId:this.recommendId
				}
				uni.$u.http.post(this.api.api_v1_recommend_detail, params).then(res => {
					if(res.code==200&&res.data){
						this.info=res.data
						let info = JSON.parse(JSON.stringify(res.data))
						info.recommend.oddsOther.sort()
						this.maxNum  = info.recommend.oddsOther[info.recommend.oddsOther.length - 1]
						this.uid = this.info.userInfo.uid
						if(this.userInfo&&this.userInfo.id){
							//获取我关注的用户
							this.getAttentionUids([this.info.userInfo.uid])
						}
						
					}
				})
			},
			//获取我关注的用户
			getAttentionUids(uids){
				let params={
					uids:uids
				}
				uni.$u.http.post(this.api.api_v1_user_getAttentionUids, params).then(res => {
					if(res.code==200&&res.data){
						this.myFollow=res.data
					}
				})
			},
			//关注或取关
			attention(){
				// #ifdef H5
				this.download.show=true
				return
				// #endif
				let type = 1
				let uid = parseInt(this.uid)
				if(this.myFollow.includes(uid)==true){
					type = 0
				}else{
					type = 1
				}
				if(this.userInfo.id){
					let params={
						uid:uid,
						type:type//类型 1关注  0取消关注
					}
					uni.$u.http.post(this.api.api_v1_user_attention, params).then(res => {
						if(res.code==200){
							uni.showToast({
								title: res.msg
							});
							if(type == 1){
								this.myFollow.push(uid)
							}else{
								this.myFollow = this.myFollow.filter(item=>item!=uid)
							}
							
						}
					}).catch(err=>{
						uni.navigateTo({
							url: '/pages/login/login',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					})
				}else{
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			//刷新token
			refreshToken(){
				let params={
				}
				uni.$u.http.post(this.api.api_v1_refreshToken, params).then(res => {
					if(res.code==200&&res.data){
						this.set_userToken(res.data.accessToken)
					}
				})
			},
			
			
		}
		
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content{
		background-color: #1b2a4d;
	}
	.lzpopup{
		display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;line-height: 26px;
		.btns{
			display: flex;justify-content: space-around;width: 100%;margin: 10px 0;
			.btn1{
				border: 1px solid #fff;color: #fff;width:300rpx;height:35px;text-align: center;line-height: 35px;border-radius: 5px;
			}
			.btn2{
				background-color: #FF6B00;color: #000;border-color: transparent;
			}
		}
	}
	.red{
		color: red;
	}
	.topp{
		position: relative;top: 7rpx;
	}
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;
		.cc{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;
			.image{
				width:50px;height: 50px;border-radius: 50%;margin-right: 10px;
			}
			.cc-center{
				flex: 1;
			}
			.btn{
				padding: 5px 10px;background-color: #f56c6c;color: #fff;font-size: 12px;border-radius: 5px;text-align: center;
			}
			.myFollow{
				background-color: #c5c5c5;
			}
		}
		.item{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;margin-top: 10px;font-size: 13px;line-height: 20px;flex-direction: column;
			.text{
				margin-right:4px;
			}
			.i2{
				display: flex;justify-content: space-around;align-items: center;padding: 15px;
				.ii1{
					display: flex;justify-content: center;align-items: center;flex-direction: column;
					.image{
						margin-bottom: 5px;width: 40px;height: 40px;
					}
				}
				.ii2{
					display: flex;font-size: 22px;
				}
			}
			.t1{
				border-bottom: 1px solid #888;padding: 5px 0;
			}
			.t2{
				display: flex;justify-content: space-around;padding: 10px;align-items: center;
				.tti{
					width: 150rpx; border: 1px solid #888;display: flex;flex-direction: column;justify-content: center;align-items: center;
					.name{
						background-color: #888;color: #fff;border-bottom: 1px solid #888;width: 100%;text-align: center;
					}
				}
				.tti2{
					flex: 1;
				}
				.tt2{
					padding: 10px;width: 150rpx;border: 1px solid #fff;text-align: center;border-radius: 10px;
				}
			}
			.goumai{
				display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;
			}
			.remark{
				font-size: 12px;
			}
			.rr1{
				display: flex;justify-content: space-between;align-items: center;padding:0px;text-align: center;
			}
		}
	}
</style>
